﻿@{
    ViewData["Title"] = "EmailTemplate";
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HOMER -  Email Template</title>
    <style>
        * {
            font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            font-size: 100%;
            line-height: 1.6em;
            margin: 0;
            padding: 0;
        }

        img {
            max-width: 600px;
            width: 100%;
        }

        body {
            -webkit-font-smoothing: antialiased;
            height: 100%;
            -webkit-text-size-adjust: none;
            width: 100% !important;
        }

        a {
            color: #348eda;
        }

        .btn-primary {
            Margin-bottom: 10px;
            width: auto !important;
        }

            .btn-primary td {
                background-color: #62cb31;
                border-radius: 3px;
                font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
                font-size: 14px;
                text-align: center;
                vertical-align: top;
            }

                .btn-primary td a {
                    background-color: #62cb31;
                    border: solid 1px #62cb31;
                    border-radius: 3px;
                    border-width: 4px 20px;
                    display: inline-block;
                    color: #ffffff;
                    cursor: pointer;
                    font-weight: bold;
                    line-height: 2;
                    text-decoration: none;
                }

        .last {
            margin-bottom: 0;
        }

        .first {
            margin-top: 0;
        }

        .padding {
            padding: 10px 0;
        }

        table.body-wrap {
            padding: 20px;
            width: 100%;
        }

            table.body-wrap .container {
                border: 1px solid #e4e5e7;
            }

        table.footer-wrap {
            clear: both !important;
            width: 100%;
        }

        .footer-wrap .container p {
            color: #666666;
            font-size: 12px;
        }

        table.footer-wrap a {
            color: #999999;
        }

        h1,
        h2,
        h3 {
            color: #111111;
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 200;
            line-height: 1.2em;
            margin: 40px 0 10px;
        }

        h1 {
            font-size: 36px;
        }

        h2 {
            font-size: 28px;
        }

        h3 {
            font-size: 22px;
        }

        p,
        ul,
        ol {
            font-size: 14px;
            font-weight: normal;
            margin-bottom: 10px;
        }

            ul li,
            ol li {
                margin-left: 5px;
                list-style-position: inside;
            }

        /* ---------------------------------------------------
            RESPONSIVENESS
        ------------------------------------------------------ */

        /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
        .container {
            clear: both !important;
            display: block !important;
            Margin: 0 auto !important;
            max-width: 600px !important;
        }

        /* Set the padding on the td rather than the div for Outlook compatibility */
        .body-wrap .container {
            padding: 40px;
        }

        /* This should also be a block element, so that it will fill 100% of the .container */
        .content {
            display: block;
            margin: 0 auto;
            max-width: 600px;
        }

            /* Let's make sure tables in the content area are 100% wide */
            .content table {
                width: 100%;
            }
    </style>
</head>

<body bgcolor="#f7f9fa">

    <table class="body-wrap" bgcolor="#f7f9fa">
        <tr>
            <td></td>
            <td class="container" bgcolor="#FFFFFF">

                <div class="content">
                    <table>
                        <tr>
                            <td>
                                <strong>Welcome in email template</strong>
                                <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
                                <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised.</p>
                                <table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td>
                                            <a href="#">Simple button</a>
                                        </td>
                                    </tr>
                                </table>
                                <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</p>
                                <p><a href="#">Follow email_template on Twitter</a></p>
                            </td>
                        </tr>
                    </table>
                </div>

            </td>
            <td></td>
        </tr>
    </table>

    <table class="footer-wrap">
        <tr>
            <td></td>
            <td class="container">

                <div class="content">
                    <table>
                        <tr>
                            <td align="center">
                                <p>
                                    Don't like these annoying emails? <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>.
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>

            </td>
            <td></td>
        </tr>
    </table>

</body>
</html>
